import React, { Component } from 'react';
import ReactDom from 'react-dom';
import isEmpty from 'lodash/isEmpty';

export default class RenderInBody extends Component {
  constructor(p) {
    super(p);
  }

  componentDidMount() {//新建一个div标签并塞进body
    this.popup = document.createElement('div');
    if (!isEmpty(this.props.styleStr)) {
      this.popup.style = this.props.styleStr;
    }
    document.body.appendChild(this.popup);
    this._renderLayer();
  }

  componentDidUpdate() {
    this._renderLayer();
  }

  componentWillUnmount() {//在组件卸载的时候，保证弹层也被卸载掉
    ReactDom.unmountComponentAtNode(this.popup);
    document.body.removeChild(this.popup);
  }

  _renderLayer() {//将弹层渲染到body下的div标签
    ReactDom.render(this.props.children, this.popup);
  }

  render() {
    return null;
  }
}
